
<#assign currentUser=Session['LOGIN_PLUGIN_SESSION_NAME']!''/>
<div class="cbp-spmenu-push" id="box">
	<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right"
		id="cbp-spmenu-s2">
		<div class="container-show">
			<div class="main">
				<section class="buttonset">
					<div class="es-bar-menu es-bar-tab">
						<ul class="bar-menu-top">
							<li class="bar-user" id="showRightPush"><a
								href="javascript:;">学<br>习<br>中<br>心
							</a></li>
							<!--<li><a href="javascript:;"><i
									class="es-icon es-icon-book"></i></a></li>-->
						</ul>
						<ul class="bar-menu-sns">     
							<!--<li class="popover-btn bar-qq-btn"><a><i
									class="es-icon es-icon-qq"></i></a>
								<div class="btn-bar-qq">
									<div class="popover fade left in">
										<div class="arrow"></div>
										<h3 class="popover-title">QQ客服</h3>
										<div class="popover-content">
											<div class="row mtm">
												<div class="col-xs-6 mbm text-overflow">
													<a class="link-light" href="" target="_blank"><img
														class="mrs" src="${contextPath}/images/klxlearning/bar_qq_group.png"
														alt="" title="点击这里给我发消息">客服1</a>
												</div>
											</div>
											<hr>
											<div class="row">
												<div class="col-xs-6 mbm">
													<p class="text-overflow">
														<img class="mrs"
															src="${contextPath}/images/klxlearning/bar_qq_group.png" alt="">客服2
													</p>
													<p class="text-overflow">
														<a target="_blank" href=""><img border="0"
															src="${contextPath}/images/klxlearning/bar_qq_group.png"
															alt="klx官方11群" title="klx官方11群">客服4</a>
													</p>
												</div>
												<div class="col-xs-6 mbm">
													<p class="text-overflow">
														<img class="mrs"
															src="${contextPath}/images/klxlearning/bar_qq_group.png" alt="">客服3
													</p>
													<p class="text-overflow">
														<a target="_blank" href=""><img border="0"
															src="${contextPath}/images/klxlearning/bar_qq_group.png"
															alt="klx官方－北京群" title="klx官方－北京群">客服5</a>
													</p>
												</div>
											</div>
										</div>
									</div>
								</div></li>-->
							<!--<li class="popover-btn bar-phone-btn"><a><i
									class="es-icon es-icon-phone"></i></a>
								<div class="btn-bar-qq">
									<div class="popover fade left in">
										<div class="arrow"></div>
										<h3 class="popover-title">电话客服</h3>
										<div class="popover-content">
											<p class="mtm">
												<i class="es-icon es-icon-accesstime mrm"></i>工作时间： 9:00 -
												18:00
											</p>
											<p class="mtm">
												<i class="es-icon es-icon-phone mrm"></i>总部： 010-12345678
											</p>
											<p class="mtm">
												<i class="es-icon es-icon-phone mrm"></i>北京： 010-12345678
											</p>
											<p class="mtm">
												<i class="es-icon es-icon-mail mrm"></i>邮箱： <a
													class="link-light" href="mailto:goldgov@goldgov.com">123456@163.com</a>
											</p>
										</div>
									</div>
								</div></li>-->
							<!--<li class="popover-btn bar-weixin-btn"><a><i
									class="es-icon es-icon-weixin"></i></a>
								<div class="btn-bar-qq"
									style="margin-left: 120px; margin-top: 25px;">
									<div class="popover fade left in" style="min-width: 130px;">
										<div class="arrow"></div>
										<h3 class="popover-title" style="display: none;"></h3>
										<div class="popover-content">
											<img width="110" class="img-responsive"
												src="${contextPath}/images/klxlearning/wechat02.png" alt="">
										</div>
									</div>
								</div></li>-->
							<!--<li><a href="" target="_blank"><i
									class="es-icon es-icon-phone1"></i></a></li>-->
							<li class="go-top show" id="top" style="margin: -10px auto 0 auto;"><a href="">
								<i class="es-icon es-icon-keyboardarrowup"style="margin-bottom: -8px"></i>
								<span class="text-sm">TOP</span></a>
							</li>
						</ul>
					</div>
					<div class="tabs-content-placeholder">
						<!-- 学习中心 -->
						<div class="es-bar-main bar-main active bar1">
							<div class="bar-main-header">
								<a href="javascript:;" id="bar-light"
									class="js-bar-shrink link-light"><i
									class="es-icon es-icon-arrowforward"></i></a> 学习中心
							</div>
							<div class="personalCurriculum"></div>
							<!-- 此处插入侧边栏内容模板 -->
						</div>
						<!-- 考试/作业 -->
						<div class="es-bar-main active bar1">
							<div class="bar-main-header">
								<a href="javascript:;" class="js-bar-shrink link-light"><i
									class="es-icon es-icon-arrowforward"></i></a>我的考试/作业
							</div>
							<div class="bar-main-body ps-container">
								<div class="text-center">
									<div class="btn-group btn-action">
										<a href="javascript:;" class="btn btn-primary active"
											id="bar-practice-review">已提交</a> <a href="javascript:;"
											class="btn btn-primary " id="bar-practice-finish"><span>已批阅</span></a>
									</div>
								</div>
								<div class="bar-homework">
									<div class="text-line gray small">
										<h5>
											<span>考试</span>
										</h5>
										<div class="line"></div>
									</div>
									<ul class="list-unstyled">
										<li><i class="es-icon es-icon-chevronright"></i><a
											target="_blank" href="" class="link-light">测试一（有时间限制）</a></li>
									</ul>
									<div class="text-line gray small">
										<h5>
											<span>作业</span>
										</h5>
										<div class="line"></div>
									</div>
									<ul class="list-unstyled">
										<li class="empty">暂无作业</li>
									</ul>
								</div>
								<div class="ps-scrollbar-x-rail"
									style="left: 0px; bottom: 3px; width: 200px; display: inherit;">
									<div class="ps-scrollbar-x" style="left: 0px; width: 173px;"></div>
								</div>
								<div class="ps-scrollbar-y-rail"
									style="top: 150px; right: 3px; height: 0px; display: inherit;">
									<div class="ps-scrollbar-y" style="top: 55px; height: 144px;"></div>
								</div>
							</div>
						</div>
						<!-- 课程/班级 -->
						<div class="es-bar-main active bar1">
							<div class="bar-main-header">
								<a href="javascript:;" class="js-bar-shrink link-light"><i
									class="es-icon es-icon-arrowforward"></i></a>我的课程
							</div>
							<div class="bar-main-body ps-container">
								<div class="text-center">
									<div class="btn-group btn-action">
										<a href="javascript:;" class="btn btn-primary active"
											id="bar-course-btn">课程</a>
									</div>
								</div>
								<div id="bar-my-course">
									<!-- 课程 -->
									<div class="course-list">
										<div class="course-item">
											<div class="course-img">
												<a target="_blank" href=""><img
													class="transform img-responsive"
													src="${contextPath}/images/klxlearning/1.jpg"></a>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar" role="progressbar"
													aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
													style="width: 0%" data-toggle="tooltip"
													data-placement="right" title="" data-original-title="40%">
												</div>
											</div>
											<div class="course-info">
												<div class="title">
													<a target="_blank" class="link-dark" href="">冬季奥林匹克运动组织体系</a>
												</div>
											</div>
										</div>
										<div class="course-item">
											<div class="course-img">
												<a target="_blank" href=""> <img
													class="transform img-responsive"
													src="${contextPath}/images/klxlearning/2.jpg">
												</a>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar" style="width: 0%"
													data-toggle="tooltip"></div>
											</div>
											<div class="course-info">
												<div class="title">
													<a target="_blank" class="link-dark" href="">冬季奥林匹克运动组织体系</a>
												</div>
											</div>
										</div>
										<div class="course-item">
											<div class="course-img">
												<a target="_blank" href=""> <img
													class="transform img-responsive"
													src="${contextPath}/images/klxlearning/3.jpg">
												</a>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar" style="width: 16%"></div>
											</div>
											<div class="course-info">
												<div class="title">
													<a target="_blank" class="link-dark" href="">冬季奥林匹克运动组织体系</a>
												</div>
											</div>
										</div>
										<div class="course-item">
											<div class="course-img">
												<a target="_blank" href=""> <img
													class="transform img-responsive"
													src="${contextPath}/images/klxlearning/1.jpg">
												</a>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar" style="width: 0%"></div>
											</div>
											<div class="course-info">
												<div class="title">
													<a target="_blank" class="link-dark" href="">冬季奥林匹克运动组织体系</a>
												</div>
											</div>
										</div>
										<div class="course-item">
											<div class="course-img">
												<a target="_blank" href=""><img
													class="transform img-responsive"
													src="${contextPath}/images/klxlearning/5.jpg"></a>
											</div>
											<div class="progress progress-xs">
												<div class="progress-bar" style="width: 0%"
													data-toggle="tooltip"></div>
											</div>
											<div class="course-info">
												<div class="title">
													<a target="_blank" class="link-dark" href="">网校账务</a>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="ps-scrollbar-x-rail"
									style="left: 0px; bottom: 3px; width: 200px; display: inherit;">
									<div class="ps-scrollbar-x" style="left: 0px; width: 173px;"></div>
								</div>
								<div class="ps-scrollbar-y-rail "
									style="top: 150px; right: 3px; height: 0px; display: inherit;">
									<div class="ps-scrollbar-y" style="top: 55px; height: 144px;"></div>
								</div>
							</div>
						</div>
						<!-- 通知 -->
						<div class="es-bar-main active bar1">
							<div class="bar-main-header">
								<a href="javascript:;" class="js-bar-shrink link-light"><i
									class="es-icon es-icon-arrowforward"></i></a>通知
							</div>
							<div class="bar-main-body ps-container">
								<ul class="bar-message">
									<li class="media">
										<div class="pull-left">
											<span class="glyphicon glyphicon-volume-down media-object"></span>
										</div>
										<div class="media-body1">
											<div class="notification-body">
												用户 <a href="" target="_blank">lazycat</a> 对你已经取消了关注！
											</div>
											<div class="notification-footer">2016-07-14 15:21</div>
										</div>
									</li>
									<li class="media">
										<div class="pull-left">
											<span class="glyphicon glyphicon-volume-down media-object"></span>
										</div>
										<div class="media-body1">
											<div class="notification-body">
												用户 <a href="" target="_blank">lazycat</a> 已经关注了你！
											</div>
											<div class="notification-footer">2016-07-14 15:18</div>
										</div>
									</li>
									<li class="media">
										<div class="pull-left">
											<span class="glyphicon glyphicon-volume-down media-object"></span>
										</div>
										<div class="media-body1">
											<div class="notification-body">
												您加入的课程<a href="">《作业练习》</a>将在2016年07月04日到期。
											</div>
											<div class="notification-footer">2016-06-24 18:13</div>
										</div>
									</li>
									<li class="media">
										<div class="pull-left">
											<span class="glyphicon glyphicon-volume-down media-object"></span>
										</div>
										<div class="media-body1">
											<div class="notification-body">
												用户 <a href="" target="_blank">junjun_俊俊</a> 已经关注了你！
											</div>
											<div class="notification-footer">2016-06-22 11:19</div>
										</div>
									</li>
								</ul>
								<div class="ps-scrollbar-x-rail"
									style="left: 0px; bottom: 3px; width: 200px; display: inherit;">
									<div class="ps-scrollbar-x" style="left: 0px; width: 173px;"></div>
								</div>
								<div class="ps-scrollbar-y-rail"
									style="top: 150px; right: 3px; height: 0px; display: inherit;">
									<div class="ps-scrollbar-y " style="top: 55px; height: 144px;"></div>
								</div>
							</div>
						</div>
						<!-- 学习历史 -->
						<div class="bar-popover-content"></div>
					</div>
				</section>
			</div>
		</div>
	</nav>
</div>
<script type="text/template" id="studyCenter">
     <div class="bar-main-body ps-container bar2">
			<!-- 用户 -->
			<div class="bar-user-center">
				<a  href="${contextPath}/opwguser/usercenter/toCenter">
			  <%if(baseUser.headPhoto){%>
				<img class="avatar-md"
					src="${contextPath}/components/gtattachment/open/downloadAttachment.json?attachmentId=<%=baseUser.headPhoto%>">
				<%} else {%>
				<img  class="avatar-md" src="${contextPath}/images/klxlearning/man.png" alt="">
				<%}%>
				</a>
				<%if(baseUser.userName){%>
				<p><%=baseUser.userName%></p>
				<%}%>
			</div>
			<!-- 直播预告 -->
			<!-- 学习任务 -->
			<div class="text-line gray small">
				<h5>
					<span>学习任务</span>
				</h5>
				<div class="line"></div>
			</div>
			<%_.each(userLearnInfoList,function(item){%>
			<div class="bar-task">
				<div class="bar-task-header">
					<div class="title">
						课程: <%=item.course.courseName%> <span><%=item.unitList.length%></span>
					</div>
				</div>
				<ul class="bar-time-line">
				   <%_.each(item.unitList,function(i){%>
					<li><span class="es-icon es-icon-doing"></span>
					       <%if(i.entityId){%>
						<a class="link-light" href="${contextPath}/user/courselearninig/learning?courseId=<%=i.courseId%>&unitId=<%=i.unitId%>&resourceId=<%=i.entityId%>"><%=i.title%>
						</a>
						   <%} else {%>
						   <span class="dontClick"><%=i.title%></span>
						   <%}%>
					</li>
					<%})%>
				</ul>
			</div>
			<%})%>							
			<div class="ps-scrollbar-x-rail"
				style="left: 0px; bottom: -147px; width: 200px; display: inherit;">
				<div class="ps-scrollbar-x" style="left: 0px; width: 173px;"></div>
			</div>
			<div class="ps-scrollbar-y-rail"
				style="top: 150px; right: 3px; height: 0px; display: inherit;">
				<div class="ps-scrollbar-y" style="top: 55px; height: 144px;"></div>
			</div>
		</div>
</script>
<!-- 引入插件 -->
<script type="text/javascript" src="${contextPath}/common/klxlearning/underscore-1.8.3-min.js"></script>
<!-- 为侧边栏添加事件 -->
<script type="text/javascript">
     //查询是否登录，登录状态和未登录状态按照需求分发
     $(function(){
	   $.post('${contextPath}/portal/open/getCurrentUser.json',function(result){
	         if(result.success){
	           
	             $('#showRightPush').click(function(){
	                 //点击学习中心未登录
	                 if(!result.data.isLogin){
	                  window.location.href = '${contextPath}/user/open/login/toLogin.do';  
	                  return;   
	                }
	                //登录状态进入中心页面，请求数据
	             
	              $.get('${contextPath}/portal/courselibrary/findLearninfoUserCenter.json',function(datas){
                       if(datas.success){ 
                       	  for(var i = 0 ; i < datas.data.userLearnInfoList.length; i++){
                       	  	  for(var j = 0; j < datas.data.userLearnInfoList[i].unitList.length; j++){
                       	  	  	  var entityId = datas.data.userLearnInfoList[i].unitList[j].entityId;
                       	  	 	  datas.data.userLearnInfoList[i].unitList[j].entityId = entityId || '';
                       	  	  }
                       	  }
                       	  var studyCenterDOM = _.template($('#studyCenter').html())(datas.data);
                       	  $('.tabs-content-placeholder .personalCurriculum').html(studyCenterDOM);
 
                       }
	              })  
	            
	           })                   
	       }
	  })

   })
</script>